<template>
    <div class="container">
        <el-card class="table-container">
            <el-table :data="tableInfo.articles" border empty-text="暂无数据">
                <el-table-column type="index" label="序号" sortable align="center" width="120px" />
                <el-table-column prop="title" label="标题" align="center">
                    <template #default="scope">
                        <div style="text-align: center">
                            <el-button type="primary" link @click="toArticleDetail(scope.row.id)">{{ scope.row.title }}
                            </el-button>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="category" label="类别" align="center" />
                <el-table-column prop="publish_status" label="状态" align="center" />
                <el-table-column prop="right" label="权限" align="center" />
                <el-table-column prop="id" label="id" sortable align="center" width="120px" />
                <el-table-column align="center">
                    <template #header>
                        <el-input v-model.trim="tableInfo.keyword" placeholder="搜索题目" class="input-with-select"
                            @blur="initTableInfo" @keyup.enter.native="initTableInfo">
                            <template #append>
                                <el-button :icon="Search" style="background-color: #409eff;color: #fff;"
                                    @click="initTableInfo"></el-button>
                            </template>
                        </el-input>
                    </template>
                    <template #default="scope">
                        <el-button type="primary" @click="toArticleDetail(scope.row.id)">查看</el-button>
                        <el-button type="danger" @click="deleteHistory(scope.$index, scope.row)">删除记录</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background layout="prev, pager, next, jumper, ->, total ,sizes"
                    :page-sizes="['5', '10', '20']" @size-change="sizeChange" @current-change="currentChange" :page-size="tableInfo.pageSize"
                    :total="tableInfo.total" small />
            </div>
        </el-card>
    </div>
</template>
<script setup lang='ts' name="article_history">
import { ref, reactive, onMounted, computed } from 'vue'
import { useUserInfoStore } from '@/stores';
import { collectionArticle, articleHistory, delHistory } from '@/api'
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import { Search } from '@element-plus/icons-vue';
const userInfoStore = useUserInfoStore()
const { uuid } = userInfoStore.userInfo
const router = useRouter()
const tableInfo = reactive({
    articles: [],
    pageSize: 10,
    page: 1,
    total: 0,
    keyword: ''
})


onMounted(async () => {
    initTableInfo()
})

const initTableInfo = async () => {
    const { keyword, page, pageSize } = tableInfo
    const res = await articleHistory({ uuid, keyword, page, pageSize })
    tableInfo.articles = res.data.data
    tableInfo.total = res.data.total

}
interface Article {
    id: number
    name: string
}
const deleteHistory = async (index: number, row: Article) => {
    try {
        const res = await delHistory({ uuid, articleId: +row.id })
        initTableInfo()
        ElMessage({
            type: 'success',
            message: res.data.msg
        })
    } catch (error) {
        ElMessage({
            type: 'success',
            message: '删除失败'
        })
    }

}


//分页器
const sizeChange = (pageSize: number) => {
    tableInfo.pageSize = pageSize
    initTableInfo()

}
const currentChange = (page: number) => {
    tableInfo.page = page
    initTableInfo()

}

const toArticleDetail = (id: number) => {
    router.push({ name: 'article_detail', params: { id } })
}
</script>
<style scoped lang="scss">
.container {
    width: 100%;
    margin: 0 20px;

    .table-container {
        width: 100%;

        .pagination {
            margin-top: 10px;
            display: flex;
            justify-content: end;
        }
    }
}
</style>